/* 3d翻转 */
.flip-wrapper {
    position: relative;
    transition: all .25s ease-in-out;/*过渡 ease-in-out:元素先加速再减速,渐显渐隐效果*/
    transform-style: preserve-3d;
  }
  .flip-wrapper.is-flipped {
    transform: rotateY(180deg);/*旋转180°*/
  }
  .flip-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    transform: rotateY(-180deg);
    text-align: center;
    color: #FFFFFF;
    background: #5fc5e4;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #78e0ff, #73a3fc);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #78d9ff, #8678ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    backface-visibility: hidden;
  }
  .flip-img {
    height: 100%;
    backface-visibility: hidden;
  }
  
  /* 图片放大、蒙版文字 */
  .overlay-container {
    position: relative;
    min-width: 50px;
    min-height: 50px;
    overflow: hidden;
  }
  .overlay-container > .coverd {
    transition:all .3s;
  }
  .overlay-container > .overlap {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    padding-top: 0;
    font-size: 12px;
    text-align: center;
    color: transparent;
    transition:all .3s;
  }
  .overlay-container:hover > .coverd {
    transform: scale(1.3, 1.3);
  }
  .overlay-container:hover > .overlap {
    color: #efefef;
    padding-top: 40px;
    font-size: 18px;
    background-color: rgba(0, 0, 0, 0.6)
  }